<template>
  <a-layout class="full-page-layout">
    <a-layout-header class="layout-header">
      <div class="header-content">
        <div style="font-size: 18px; font-weight: 500;">qwen2.5vl:3b模型</div>
      </div>
    </a-layout-header>
    <a-layout-content class="layout-content">
      <!-- 登录/注册按钮 -->
      <el-button v-if="!userStore.islogin" size="large"
          @click="dialogVisible = true" style="width: 280px;border-radius: 12px" plain>
        登录
      </el-button>
      <!-- 登录对话框 -->
      <el-dialog v-model="dialogVisible" width="350" :before-close="handleClose" center align-center>
        <el-form>
          <div style="text-align: center; font-size: 18px; font-weight: bold;">登录</div><br>
          <el-form-item label="手机">
            <el-input v-model="loginform.phone" placeholder="请输入手机号" style="width: 300px" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="loginform.password" placeholder="请输入密码" style="width: 300px" maxlength="20"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handlelogin" size="large" style="width: 320px;border-radius: 12px" type="primary" plain>
              登录
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 当前用户信息 -->
      <el-dropdown placement="bottom" v-if="userStore.islogin" >
        <el-button size="large" style="width: 280px;border-radius: 12px">
          当前用户:{{ userStore.user.username}}</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item style="width: 200px;border-radius: 12px;justify-content: center"
                              @click="userStore.logout()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown><br>
      <el-button size="large" @click="handleNewDialog" :icon="Plus" type="primary"
                 style="width: 280px;border-radius: 12px" plain>新对话
      </el-button>
      <el-divider/>
      <component :is="currentComponent"/>
    </a-layout-content>
    <a-layout-footer class="layout-footer"></a-layout-footer>
  </a-layout>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/usersStore.js'; // 根据实际路径调整
import {onMounted, shallowRef} from 'vue';
import HistoryConversation from '@/components/HistoryConversation.vue';
import type { Component } from 'vue'; // 引入组件类型
const userStore = useUserStore();
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, inject } from 'vue';
import axios from "axios";
const refreshParent = inject<() => void>('refreshParent');
const currentComponent = shallowRef<Component | null>(HistoryConversation);
// 登录相关状态
const dialogVisible = ref(false);
const loginform = ref({
  phone: '',
  password: ''
});
// 关闭登录框
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认关闭登录框吗?', '', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => done());
};
// 登录逻辑
const handlelogin = async () => {
  try {
    const response = await axios.get('ai/users/UserLogin', {
      params: {
        phone: loginform.value.phone,
        password: loginform.value.password
      }
    });
    if (response.data.code === 200) {
      userStore.user= response.data.data;
      userStore.user.userId=response.data.data.id;
      userStore.islogin= true;
      dialogVisible.value = false;
      ElMessage.success('登录成功!');
    }
  } catch (err) {
    console.error('登录失败:', err);
    ElMessage.error('登录失败，请检查账号密码');
  }
};
// 点击新对话：触发父组件重新挂载
const handleNewDialog = async () => {
  const needRefresh = await userStore.isneedlogin();
  userStore.canCreateConversation=true;
  await userStore.getHistoryConversation();
  await clear();
  if (needRefresh && refreshParent) {
    refreshParent(); // 仅当需要刷新时执行
  }
};
const clear=async () => {
  const response = await axios.post('ai/conversations/clearHistory')
  if (response.data.code === 200) {
    console.log("清除历史对话成功");
  }
}
</script>

<style scoped>
/* 布局样式 */
.full-page-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.layout-header {
  flex: 0 0 10%;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout-content {
  flex: 1 1 65%;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
}

.layout-footer {
  flex: 0 0 25%;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>